<template>
    <view :style="{ paddingTop: top + 'px' }" class="min-h-screen bg bg-[#F8F8F8]">
        <view :style="{ height: pendantHight + 'px' }"
            class="text-[#3D3D3D] font-medium  flex items-center justify-center text-[40rpx] relative">
            注册
            <view @click="goback" class="absolute left-[36rpx]"><up-icon name="arrow-left" color="#000"
                    size="23"></up-icon></view>

        </view>
        <view class="mt-[107rpx] text-center text-[39rpx] font-medium">
            <view class="tracking-widest"> 教师账号注册</view>
        </view>
        <view class="mx-[40rpx] mt-[105rpx]">
            <view  class="bg-[#EFEFEF] h-[88rpx] rounded pl-[20rpx] pr-[45rpx] flex items-center"><text class=" font-medium">JS</text> <input  class=" h-[88rpx] ml-[25rpx]" type="number" v-model="phone" placeholder="请输入手机号码"></view>
           
            <view class="flex items-center justify-center  mt-[45rpx]">
                <input v-model="code" class="bg-[#EFEFEF] h-[88rpx]  rounded px-[45rpx]  flex-1" type="number"
                    placeholder="请输入验证码">
                <view @click="getCode"
                    class="w-[166rpx] rounded-tr rounded-br font-medium text-[30rpx] px-1 bg-[#FD755D] text-white h-[88rpx] flex justify-center items-center">
                    {{countdown==0?'获取验证码':countdown+'s'}}</view>
            </view>
            <view class=" font-medium pl-[21rpx] border-b border-[#EFEFEF] py-[23rpx] my-[48rpx]">教师账号：JS{{ phone }}</view>
            <input v-model="password" class="bg-[#EFEFEF] h-[88rpx] rounded px-[45rpx] mt-[45rpx]" type="password" placeholder="请输入密码">
            <input v-model="repassword" class="bg-[#EFEFEF] h-[88rpx] rounded px-[45rpx] mt-[45rpx]" type="password" placeholder="再次确认密码">
            <view class="text-[31rpx] mt-[48rpx] mx-[24rpx] font-medium flex justify-between">
                <text>已有账号</text>
                <text>忘记密码</text>
            </view>
        </view>
        <view class="text-[25rpx] mt-[96rpx] text-[#3D3D3D] flex ml-[35rpx] items-center">
            <u-checkbox-group v-model="agreement">
                <u-checkbox shape="circle" label="" name="1">
                </u-checkbox>
            </u-checkbox-group>
            <text>我已阅读并同意</text><text class="text-[#FD755D]">《用户隐私协议》</text>
            <text class="text-[#FD755D]">《用户服务协议》</text>
        </view>
        <view class="mt-[32rpx] flex justify-center">
            <view @click="sumbit"
                class="w-[270rpx] rounded font-medium text-[34rpx] px-1 bg-[#FD755D] text-white h-[88rpx] flex justify-center items-center">
                填写个人资料</view>
        </view>
    </view>

</template>

<script setup>
import api from "@/api/api"
import { useUserStore } from '@/stores/userinfo'
import { ref } from "vue"
const res = wx.getMenuButtonBoundingClientRect()
const top = ref(res.top) //胶囊距上距离
const pendantHight = ref(res.bottom - res.top) //胶囊高度  
const agreement = ref(false)
const phone = ref('')
const password = ref("")
const repassword = ref("")
const code = ref("")

const successful = ref(false)
const countdown = ref(0)
const goback = () => {
    uni.navigateBack()
}
const navigateTo = (url) => {
    uni.navigateTo({
        url
    })
}
const getCode = async () => { 
    uni.showLoading({
        title: '发送中',
        mask: true
    })
    const regex = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
    if (regex.test(phone.value)) {
        countdown.value = 60
       const timer =  setInterval(() => {
            countdown.value--
            if (countdown.value == 0) {
                clearInterval(timer)
            }
        }, 1000)
        const res = await api.getPhoneCode({
            phone: phone.value,
            event: 'register'
        })
        if (res.code == 200) {
            uni.showToast({
                title: '发送成功',
                icon: 'none'
            })
        }else{
            uni.showToast({
                title: res.msg,
                icon: 'error'
            })
        }


    }else{
        uni.showToast({
        title: '请输入正确手机号码',
        icon: 'none'
    })
    }

    
}
 
onLoad(() => { getINfo.getLoginData()})
const getINfo = reactive({
      userInfoData: [], 
      getLoginData: async () => { 
          if (uni.getStorageSync('token')) {
            getINfo.userInfoData = JSON.parse(uni.getStorageSync('userInfo'))
            phone.value = getINfo.userInfoData.mobile
          }
          },
})

const sumbit = async () => {

   if(!agreement.value) return uni.showToast({title: '请先同意协议',icon: 'none' })
   if(phone.value=='') return uni.showToast({title: '请输入手机号码',icon: 'none' })
   if(code.value=='') return uni.showToast({title: '请输入验证码',icon: 'none' })
   if(password.value=='' || password.value!=repassword.value) return uni.showToast({title: '密码不一致' ,icon: 'none'})


   uni.showLoading({
       title: '加载中', 
   })
   
   const res = await api.teacherRegister({
       username: 'JS'+phone.value,
       phone: phone.value,
       code: code.value,
       password: password.value,
       repassword: repassword.value,
       
   })
   if(res.code == 200){
       if(res.data != null){ 
         uni.setStorageSync('token', res.data.authorization)
         uni.setStorageSync('userInfo',JSON.stringify(res.data.userinfo))

         /* uni.showToast({
             title: '注册成功',
             icon: 'none'
         }) */
         
         navigateTo('pages/utils/teacherRegistrSucc?group_id=2')
                    
         const timer = setTimeout(() => {
             uni.hideLoading()
          navigateTo('/pages/teacherDataEdit/teacherDataEdit?phone='+phone.value)
                     
             clearTimeout(timer)
         }, 1500);
       }else{
         uni.showToast({
             title: res.msg,
             icon: 'none'
         })
       }
       
   }else{
       uni.showToast({
           title: res.msg,
           icon: 'error'
       })
   }
  
  

}
</script>

<style lang="scss" scoped>
.bg {
    background: linear-gradient(168deg, rgba(255, 146, 127, 0.4) 0%, #FFFFFF 40%, rgba(255, 255, 255, 0) 100%);
}
</style>